<template>
    <el-card class="common-card">
        <div class="card-top">
            <div class="top-title">{{ title }}</div>
            <div class="top-value">{{ value }}</div>
        </div>
        <div class="card-middle">
            <slot>222</slot>
        </div>
        <div class="card-line"></div>
        <div class="card-bottom">
            <slot name="footer"></slot>
        </div>
    </el-card>
</template>

<script lang="ts">
export default {
    name: 'CommonCard'
}
</script>

<script setup lang="ts">
defineProps(['title', 'value'])
</script>



<style lang="scss" scoped>
.common-card {
    .card-top {
        .top-title {
            font-size: 12px;
            color: #999;
        }

        .top-value {
            font-size: 25px;
            letter-spacing: 1px;
            margin: 6px 0;
        }
    }

    .card-middle {
        height: 50px;
    }

    .card-line {
        border-bottom: 1px solid #999;
        margin: 10px 0;
    }

    .card-bottom {
        font-size: 12px;
        color: #666;
    }
}
</style>